<!DOCTYPE html>
<html style="width:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>端API</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>
    <style>
        .active {
            border-bottom: none;
        }
        .active span{
          background: #333;
          color: #ffffff;
        }
    </style>
</head>
<body>
<div id="app" class="mall-body container"  style="height:100%" v-cloak>
    <div class="mall-left" style="width:100%;overflow-x:hidden;overflow-y:hidden;height:100%">
        <div style="height:90%;overflow:auto;">
            <ul v-for="(category ,index) in categorys" :key="category.category_id">
                <li class="li" v-myclick="[[index, category.category_id], changeStatus]"
                    :class="{'active': index == isSelected}">
                    <span style="border-radius:16px;padding:4px;width:90%;text-align:center">{{category.name}}</span>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script src="../../script/vue.js"></script>
<script src="../../script/api.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>
<script>
    var vm;

    apiready = function () {
        setBSImg();
        initApp();
        api.parseTapmode();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                isSelected: 0,
                categorys: [],
                BSImg: {
                    big: Vue.BSImg == 'big',
                    small: Vue.BSImg == 'small',
                },
            },
            methods: {
                changeStatus: function (index, id) {
                    if (index == -1) {
                        var k = -1;
                        for (var i = 0, l = this.categorys.length; i < l; i++) {
                            if (this.categorys[i].category_id == id) {
                                k = i;
                                break;
                            }
                        }
                        this.isSelected = k;
                    } else {
                        this.isSelected = index;
                    }
                    var data = {
                        "pid": id
                    };
                    var callback = function (ret) {
                        api.sendEvent({
                            name: 'getCategorysBy1',
                            extra: {
                                categorysBy1: ret.content
                            }
                        });
                    };
                    pinet.post(URL.getCategorysBy1, data, callback);
                },
            },
            created: function () {
                var callback = function (ret) {
                    vm.categorys = ret.content;
                    var data = {
                        "pid": ret.content[0].category_id
                    };
                    pinet.post(URL.getCategorysBy1, data, function (ret) {
                        api.sendEvent({
                            name: 'getCategorysBy1',
                            extra: {
                                categorysBy1: ret.content
                            }
                        });
                    });
                }
                pinet.get(URL.getCategoryList, callback);
            }
        })
    }

</script>
</html>
